<template>
    <div id="GovernmentMana">
        
        <div class="top_content">
            <div class="title">
                <h1>政府碳管理</h1>
                <p>Government carbon management</p>
            </div>
        </div>
         <div class="mid_content clearfix">
            <div class="titleBG" style="width:150px">温室气体排放清单</div>
            <div class="content">
                <el-image :src="paifangqingdan" :preview-src-list="srcList" :initial-index="0" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanpancha.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:120px">企业数据监测</div>
            <div class="content">
                <el-image :src="shujujiance" :preview-src-list="srcList" :initial-index="1" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanpancha.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:120px">企业数据报送</div>
            <div class="content_cont">
                <el-row :gutter="12">
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 不符合情况整改</div>  
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover"> 
                            <div class="title"> 温室气体排放报告报送</div>    
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="titleBG" style="width:120px">低碳发展规划</div>
            <div class="content">
                <el-image :src="tanguihua" :preview-src-list="srcList" :initial-index="2" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanpancha.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:120px">低碳试点方案</div>
            <div class="content">
                <el-image :src="tanshidian" :preview-src-list="srcList" :initial-index="3" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanpancha.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:160px">年度企业碳排放考核</div>
            <div class="content">
                <el-image :src="tanpaifang" :preview-src-list="srcList" :initial-index="4" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanpancha.png" alt=""> -->
            </div>
        </div>
    </div>
</template>

<script>
import paifangqingdan from '../../assets/paifangqingdan.png'
import shujujiance from '../../assets/shujujiance.png'
import tanguihua from '../../assets/tanguihua.png'
import tanshidian from '../../assets/tanshidian.png'
import tanpaifang from '../../assets/tanpaifang.png'
export default {
    data() {
        return {
            paifangqingdan,shujujiance,tanguihua,tanshidian,tanpaifang,
            srcList:[require('../../assets/paifangqingdan.png'),require('../../assets/shujujiance.png'),require('../../assets/tanguihua.png')
            ,require('../../assets/tanshidian.png'),require('../../assets/tanpaifang.png')]
        }
    },
    methods:{
    },
    mounted(){
        window.scrollTo(0,0);
    }
}
</script>


<style scoped>
/* #AboutUs{
    position: relative;
} */
#GovernmentMana{
    height: 100%;
}
.top_content{
    width:100%;
    height:480px;
    background: url("../../assets/bigcc.jpeg");
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;

}
.top_content .title{
    margin-top: 60px;
    color: #333;
}
.mid_content{
    width: 1080px;
    position:relative;
    left: 50%;
    margin-left:-540px;
    top:-300px;
    min-height: 600px;
    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.mid_content_left{
    width: 30%;
    float: left;
}
.mid_content_right{
    width: 70%;
    float: left;
}
.leftTitle{
    line-height: 40px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom:20px;
}
.reportRead{
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
    border: 1px solid #efefef;
}
.reportRead .title_read{
    color:#333;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}
.head_read{
    font-size: 18px;
    color:#333;
    font-weight: bold;
    text-align: left;
    line-height: 30px;
}
.content_read{
    font-size: 16px;
    color: #666;
    line-height: 20px;
    text-indent: 20px;
}

.report_content{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}
.report_content:hover{

    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
}
.report_left_img{
    float: left;
    width: 100px;
    padding: 10px;
    box-sizing: border-box;
}
.report_left_img img{
    width: 80px;
    height: 80px;
}
.report_right_text{
    width: calc(100% - 100px);
    float: left;
}
.report_title_content{
    color:#666;
    line-height: 30px;
    margin-bottom: 10px;
}
.report_title{
    font-size: 18px;
    font-weight: bold;
}
.report_button{
    float: right;
}
.search{
    float: left;
}


ul{
    list-style: none;

}
.normalLi{
    padding: 10px 20px;
    border: 1px solid #efefef;
    border-radius: 4px;
    color:#666;
    font-size: 14px;
    margin-left: 10px;
    margin-block: 10px;
    float: left;
    width: auto;
}
.nowsli{
    background: #333;
    color:#fff;
}
.normalLi:hover{
    cursor: pointer;
}
.chart_part{
    width:100%;
    /*margin-left:5%;*/
    height: 300px;
    margin-top: 60px;
    border-bottom: 1px solid #efefef;
    padding: 10px 0;
}
.chartpart1{
    height: 300px!important;
}
#lineChart{
    width:500px;
    height:300px;
}
.titleBG{
    width: 100px;
    height: 60px;
    background:url('../../assets/bgtitle.png');
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;
    line-height: 80px;
    color:#666;
    margin-bottom:10px;
}
.content{
    width:100%;
    text-align: center;
}
.content img{
    max-width:100%;
    margin:auto;
}
.content_cont .title{
    font-weight: blod;
    color:#333;
    font-size:16px;
}
.content_cont .spans{
    font-size:14px;
    color:#666;
    margin-top:10px;
}
</style>